<template>

  <div>
    <div class="admin-title">校园二手交易系统后台管理中心</div>
    <el-menu
      class="el-menu-demo"
      :default-active="this.$router.path"
      router
      mode="horizontal"
      background-color="#353636"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleSelect"
    >
      <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
        {{ item.navItem }}
      </el-menu-item>
    </el-menu>
    <div class="admin-title2">商品分类管理中心</div>
    <div class="page" :class="{active: isActive}">
      <div>
        <el-table :data="goodsType" border style="width: 100%">
          <el-table-column prop="id" label="id" width="180"></el-table-column>
          <el-table-column prop="name" label="分类名称" width="300"></el-table-column>
          <el-table-column prop="mobile" label="分类描述" width="300"></el-table-column>
          <el-table-column fixed="right" label="操作" width="600">
            <template slot-scope="scope">
              <el-button
                type="text" size="medium "
                @click.native.prevent="deleteRow(scope.$index, goodsType)">删除
              </el-button>
              <el-button type="text" size="medium " @click.native.prevent="updateUser(scope.$index, goodsType)">修改
              </el-button>
              <el-button type="text" size="medium " @click.native.prevent="addUser(scope.$index, goodsType)">添加</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-show="isShow" class="isshow">
          <div class="update">
            <div><span>分类名</span><input class="input" v-model="updateType.name"></div>
            <div><span>分类描述</span><input class="input" v-model="updateType.describe"></div>
            <div><el-button type="success" @click="makesure()">确认更新</el-button></div>
            <div><el-button type="success" @click="cancel()">取消更新</el-button></div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import remote from '@/utils/http'
export default {
  name: 'IndexAdmin',
  data () {
    return {
      isShow: false,
      isActive: false,
      goodsType: [],
      // 点击修改后选择的id
      updateId: 0,
      // 更新数据
      updateType: {
        describe: '',
        name: ''
      },
      //  导航数据
      navList: [
        {name: '/AdminIndex', navItem: '用户管理'},
        {name: '/IndexAdmin', navItem: '商品分类管理'},
        {name: '/goodsControl', navItem: '二手商品管理'},
        {name: '/releaseControl', navItem: '二手求购信息管理'},
        {name: '/test4', navItem: '其他信息管理'}
      ],
      activeIndex2: '1' // 默认导航
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    // 导航选择
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    // 删除用户
    deleteRow (index, rows) {
      let that = this
      that.$confirm('此操作不可逆, 确认删除吗?', '删除用户警告提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        let id = rows[index].id
        remote('deleteType', false, {id: id}).then(res => {
          if (res.code === 0) {
            console.log(res.message)
            that.$message({
              message: res.message,
              type: 'success'
            })
            this.getUserList()
          } else {
            that.$message({
              message: res.message,
              type: 'error'
            })
          }
        })
      }).catch(() => {
        that.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 添加分类
    addUser (index, rows) {
      this.$router.push({path: '/addtype'})
    },
    // 获取分类列表
    getUserList () {
      remote('earntype', false, {}).then(res => {
        if (res.code === 0) {
          this.goodsType = res.data
          console.log(this.goodsType, '用户数据')
          console.log(this.goodsType, '点击修改的id')
        }
      })
    },
    // 更新数据 确认发布
    makesure () {
      let that = this
      let id = this.updateId
      remote('updateType', false, { id: id,
        name: this.updateType.name,
        describe: this.updateType.describe
      }).then(res => {
        if (res.code === 0) {
          that.$message({
            message: res.message,
            type: 'success'
          })
        } else {
          that.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    // 更新数据 取消发布
    updateUser (index, rows) {
      if (!this.isShow) {
        this.isShow = true
      } else {
        this.isShow = false
      }
      this.isActive = true
      // 首先获得该数据
      let id = rows[index].id
      this.updateId = id
      console.log(this.updateId, '希望可以获取到该id')
      remote('earnOneUser', false, {id: id}).then(res => {
        if (res.code === 0) {
          this.updateUserData = res.data
          console.log(this.updateUserData, 'userdate')
        }
      })
    },
    // 取消发布
    cancel () {
      this.isShow = false
      this.isActive = false
    },
    handleClick (row) {
      console.log(row)
    }
  }
}
</script>

<style scoped>
  .admin-title{
    text-align: center;
    font-size: 30px;
    background: #000;
    padding: 15px;
    color: #fff;
    letter-spacing: 5px;
  }
  .admin-title2{
    margin: 0 5%;
    background: #1296db;
    border-radius: 10px;
    padding: 8px;
    font-size: 24px;
    text-align: center;
    letter-spacing: 20px;
  }
  .page{
    font-size: 40px;
    padding: 50px 50px;
    position: relative;
    height: 100vh;
    overflow: auto;
    /*background: rgba(0,0,0,.6);*/
  }
  .isshow{
    position: absolute;
    left: 30%;
    top: 20%;
    width: 800px;
    height: 600px;
    background: #FFEBCD;
    text-align: center;
    z-index: 9999;
  }
  .active{
    font-size: 40px;
    padding: 50px 50px;
    position: relative;
    height: 100vh;
    overflow: auto;
    background: rgba(0,0,0,.6);
  }
  .update{
    margin-top: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  span {
    font-size: 30px;
    margin-right: 20px;
  }
  input{
    width: 400px;
    height: 60px;
    font-size: 24px;
    margin-bottom: 13px;
  }
</style>
